<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      li {
        list-style: none;
        width: 300px;
        height: 100px;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 100px;
      }
      ul {
        float: left;
      }
      div {
        float: left;
        width: 500px;
        height: 305px;
        border: 1px solid #ccc;
        margin-top: 18px;
      }
    </style>
  </head>

  <body>
    <ul onmouseover="fun()">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <div>
      <img
        id="tu"
        src="https://img-baofun.zhhainiao.com/market/133/f43477adecc82e51dd1f5bd901c854c5_preview_raw.jpg"
        alt=""
      />
    </div>
    <input type="text" onkeydown="fun()" />
  </body>

  <script>
    var imgArr = [
      'https://img-baofun.zhhainiao.com/market/133/f43477adecc82e51dd1f5bd901c854c5_preview_raw.jpg',
      'https://img-baofun.zhhainiao.com/market/133/bb29f3ae4b9b93fd5c71fe32460964bc_preview.jpg',
      'https://img-baofun.zhhainiao.com/market/133/e13c795109d561dbf891b8056f659d48_preview_raw.jpg',
    ]
    function fun() {
      console.log(event)
      if (event.target.nodeName == 'LI') {
        var liAll = document.querySelectorAll('LI'),
          liObj = event.target
        //检索下标
        var index = [].indexOf.call(liAll, liObj)
        for (var i = 0; i < liAll.length; i++) {
          liAll[i].style.background = 'white'
        }
        document.getElementById('tu').src = imgArr[index]
        liObj.style.background = 'blue'
      }
    }
  </script>
</html>
